<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue To Do List</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input v-model='inputValue' type="text">
		<button v-on:click='handleBtnClick'>提交</button>
		<ul>
			<!-- <li v-for='item in list'>
				{{item}}
			</li> -->
			<todo-item @delete="handleItemDelete" :item="item" :index="index" v-for="(item,index) in list"/>
		</ul>
		
	</div>
	<script>
		//简写
		//v-bind:xx  =>  :xx		
		//v-on:xx   =>  @xx		

		// //注册全局组件
		// Vue.component("TodoItem",{
		// 	props: ["obj"],
		// 	template: "<li>{{obj}}</li>"
		// })

		//局部组件
		var TodoItem = {
			props: ["item","index"],
			methods: {
				handleItemClick: function() {
					this.$emit("delete",this.index)	//向外部发送一个delete事件，父组件可以监听这个事件
				}
			},
			template: "<li @click='handleItemClick'>{{item}}</li>"
		}

		var app = new Vue({
			el: '#app',	//绑定element
			components: {	//注册局部组件
				TodoItem: TodoItem
			},
			data: {	//数据
				inputValue: '',
				list: []
			},
			methods: {	//定义方法
				handleBtnClick: function() {
					this.list.push(this.inputValue)
					this.inputValue = ''
				},
				handleItemDelete: function(index) {
					this.list.splice(index,1)
				}
			}
		})

		console.log(app)
	</script>
</body>
</html>